<!DOCTYPE html>
<html>
<head>
<title>overshow demo</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://style.alibaba.com/css/4v/common.css" />
<script type="text/javascript" src="http://style.alibaba.com/js/ae.js"></script>
</head>
<body>
<style>
	.tip-box {position:absolute; visibility:hidden;}
	.tip-box .tip-main-con {float:left;border:1px solid #89B1E3;background-color:#ffffff;padding:8px 15px;color:#666666; max-width:490px; _width:490px;}
	.tip-box .tip-main-con span.arrow {background:transparent url('http://i02.i.aliimg.com/images/eng/escrow/icon/tip_sprite.gif') no-repeat scroll 0 7px;width:15px;height:15px;overflow:hidden;display:block;position:absolute;left:170px;top:-14px;}
	.tip-box .tip-main-con h4 {margin:0; font-size:12px;}
	.tip-box .tip-main-con ul {margin:0; list-style:none;}
	.tip-box .tip-main-con ul li {background:transparent url('http://style.alibaba.com/images/eng/style/css_images/sprites/sprites_ggs_home.png') no-repeat scroll -80px -197px;padding: 3px 0 3px 14px;}
	.tip-box .right-border {float:left;width:2px;margin-top:2px;overflow:hidden;background-color:#cccccc;}
	.tip-box .bottom-border {clear:both;margin-left:2px;height:2px;overflow:hidden!important;background-color:#cccccc;}
</style>

<div class="dpl-board-alert-large" style="width:800px; margin:30px auto;">
	<h3>鼠标经过下面的问号小图，查看演示</h3>
	<p>You have a record of displaying prohibited or restricted products, or products that infringe on the intellectual property rights (IPR) of others in the past 6 months <img id="J-quotation-help" src="http://img.alibaba.com/images/eng/style/css_images/myalibaba/minisite_question.gif" />. <a href="#">Learn more</a></p>
</div>

<script type="text/javascript">
	AE.namespace( 'AE.app.newOverShow' );
	AE.app.newOverShow = function() {
		this.config = {
			targetId: "J-quotation-help",  //目标ID
			showConId: "tip-box",          //显示内容ID
			offsetX: -170,					   //浮出窗口相对于目标元素的X偏移量
			offsetY: 27,					   //浮出窗口相对于目标元素的y偏移量
			delayHide: 300,				   //消失延时时间(ms)	
			tipContent: "tip info"           //提示信息内容
		}
	};

	AE.app.newOverShow.prototype = {
		init: function( customConfig ) {
			this.config = YL.merge( this.config, customConfig || {} );
			this._createDom();
			this._initEvent();
		},

		_createDom: function() {
			var _self = this,
				config = this.config;

			//创建HTML
			var tipHTML = 
				'<div class="tip-main-con">' + 
				'	<span class="arrow"></span>' + 
				'	<div class="tip-con"></div>' + 
				'</div>' + 
				'<div class="right-border"></div>' + 
				'<div class="bottom-border"></div>' ;
			var tipContainer = document.createElement( "div" );
			tipContainer.id = config.showConId;
			YUD.addClass( tipContainer, "tip-box" );
			tipContainer.innerHTML = tipHTML;
			document.body.appendChild( tipContainer );

			//定义DOM
			var tipContent = YUD.getElementsByClassName( "tip-con", "div", tipContainer )[ 0 ],
				tipMainCon = YUD.getElementsByClassName( "tip-main-con", "div", tipContainer )[ 0 ], 
				rightBorder = YUD.getElementsByClassName( "right-border", "div", tipContainer )[ 0 ],   
				bottomBorder = YUD.getElementsByClassName( "bottom-border", "div", tipContainer)[ 0 ];  
			tipContent.innerHTML = config.tipContent;

			//调整阴影部分位置
			rightBorder.style.height = tipContainer.offsetHeight - 4 + "px";
			bottomBorder.style.width = tipMainCon.offsetWidth + "px";
		},

		_initEvent: function() {
			var _self = this,
				config = this.config,
				tipContainer = YUD.get( config.showConId );

			//添加事件
			YUE.on( config.targetId, "mouseover", function() {
				tipContainer.style.visibility = "visible";
				tipContainer.style.left = YUD.getX( this ) + config.offsetX + "px";
				tipContainer.style.top = YUD.getY( this ) + config.offsetY + "px";
			} );
			YUE.on( config.targetId, "mouseout", function() {
				setTimeout( function() {
					tipContainer.style.visibility = "hidden";
				}, config.delayHide );
			} );
		}
	};

	YUE.onDOMReady( function() {
		var tipCon = 			
			'<h4>Actions/inactions that may have led to your product violation record include:</h4>' +
			'<ul>' +
				'<li>After being informed of a complaint filed against your products or relevant information for infringing the legitimate IPR of others, you failed to respond or raise any objection to such complaint within the prescribed period.</li>' +
				'<li>Although you have raised objection to a complaint, you failed to provide valid evidence to show that you have not infringed the complaining party\'s IPR.</li>' +
			'</ul>';
		new AE.app.newOverShow().init( {
			tipContent: tipCon
		} );
	} );
</script>

</body>
</html>